<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" class="myinupt" />
    <div class="box active hello"></div>
    <script>
      // 1.以 某某作为开头  ^
      // var myinuptEle = document.querySelector(".myinupt");
      // myinuptEle.onblur = function(){
      //     var val = this.value;
      //     // console.log(val);
      //     var reg =  /^a\d+/;
      //     if(reg.test(val)){
      //         console.log("输入格式正确")
      //     }else{
      //         console.log("输入格式错误，请重新输入");
      //     }
      // }

      // 2.以 某某作为结尾  $

      //  var myinuptEle = document.querySelector(".myinupt");
      //     myinuptEle.onblur = function(){
      //         var val = this.value;
      //         // console.log(val);
      //         var reg =  /^a\d+b$/;
      //         if(reg.test(val)){
      //             console.log("输入格式正确")
      //         }else{
      //             console.log("输入格式错误，请重新输入");
      //         }
      //     }

      // 3. 边界符号(判断是否存在边界)： \b
      // 边界 ： 非 \w(数字 、字母、下划线) （\W）的都是边界；
      //  var str = "this is a knife";
      // //  查找字符串中是否有 is单词；
      // var reg = /\bis\b/;
      // console.log(reg.test(str));

      var className = document.querySelector(".box").className;
      var myname = "hello";
      // 如果是 通过内置 构造函数来写正则 所有的 \ 都需要转义   \s -->\\s
      var reg = new RegExp("\\b" + myname + "\\b");
      // var reg = /\bhello\b/;
      if (reg.test(className)) {
        console.log("有hello类名");
      } else {
        console.log("没有hello类名");
      }

      // 1.^ 以某某作为开头 2.$ 以某某作为结尾  3. \b 匹配边界 （\W就是边界）;
    </script>
  </body>
</html>
